import React, { PureComponent } from 'react';
import { Icon } from 'antd';
import { Link }  from 'umi';
import Debounce from 'lodash-decorators/debounce';
import styles from './index.less';
import RightContent from './RightContent';

export default class GlobalHeader extends PureComponent {
  @Debounce(600)
    static triggerResizeEvent() {
        const event = document.createEvent('HTMLEvents');
        event.initEvent('resize', true, false);
        window.dispatchEvent(event);
    }

  componentWillUnmount() {
      this.triggerResizeEvent.cancel();
  }

  toggle = () => {
      const { collapsed, onCollapse } = this.props;
      onCollapse(!collapsed);
      GlobalHeader.triggerResizeEvent();
  };

  render() {
      const { collapsed, isMobile, logo } = this.props;
      return (
          <div className={styles.header}>
              {isMobile && (
                  <Link to="/" className={styles.logo} key="logo">
                      <img src={logo} alt="logo" width="32" />
                  </Link>
              )}
              <span className={styles.trigger} onClick={this.toggle}>
                  <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
              </span>
              <RightContent {...this.props} />
          </div>
      );
  }
}
